<template>
  <div>
    <Form label-position="top" :show-message="false" v-if="personType===2">
      <FormItem label="集团公司当月管控要求" :required='true'>
        <Input v-model.trim="description"  :maxlength="500" placeholder="请输入集团公司当月管控要求"  type="textarea"></Input>
      </FormItem>
    </Form>
    <div class="button-s">
      <!--<Button type="primary" @click="issuePassBtn(1)">选择工程公司管理人员</Button>
      <Button type="primary" @click="issuePassBtn(2)">选择工程公司分管领导</Button>-->
      <Row class="paln-table-title">
        <Col span="8" style="color:#EF3E43;">
          *请先勾选管控措施，添加相应的管控人：
        </Col>
        <Col span="8">
          <span class="col-title">
            <span v-if="personType === 2">工程公司管理人员</span>
            <span v-if="personType === 1">集团公司管理人员</span>
          </span>
          <Button style="color: #2d8cf0" @click="issuePassBtn(1)">选择人员</Button>
        </Col>
        <Col span="8">
          <span class="col-title">
            <span v-if="personType === 2">工程公司分管领导</span>
            <span v-if="personType === 1">集团公司分管领导</span>
          </span>
          <Button style="color: #2d8cf0" @click="issuePassBtn(2)">选择人员</Button>
        </Col>
      </Row>
    </div>
    <Table
      border
      ref="selection"
      :columns="columns"
      :data="dataList"
      @on-selection-change="selectChangeRiado">
      <template slot-scope="{ row, index }" slot="action">
        <span
          title="详情"
          class="button-class"
          type="text"
          @click="destroyBtn(row)" >详情</span>
    </template>
    </Table>
    <Modal
      v-model="detailModal"
      width="70%"
      :footer-hide="true"
      title="详情">
      <Form label-position="top">
        <FormItem label="管控措施">
          <Input class="width50" v-model.trim="formData.measures" readonly></Input>
        </FormItem>
        <FormItem label="措施类型">
          <Input class="width50" v-model.trim="formData.measureTypeName" readonly></Input>
        </FormItem>
        <FormItem label="频次">
          <Input class="width50" v-model.trim="formData.frequencyName" readonly></Input>
        </FormItem>
        <FormItem label="动态管控岗">
          <Table border
                 :columns="columns1"
                 :data="detailData">
          </Table>
        </FormItem>
      </Form>
    </Modal>
    <Modal
      v-model="checkPersonModal"
      width="70%"
      :footer-hide="true"
      title="人员选择">
      <checkPersonModal @func="getMsg" :detailShow="true" ></checkPersonModal>
    </Modal>
  </div>
</template>

<script>
  import checkPersonModal from '../../MeasurePlan/checkPersonModal'
  export default {
    components: {checkPersonModal},
    name: "planFormulationModal",
    props:{
      id:String,
      userLists:Array
    },
    data(){
      return{
        userDetail:JSON.parse(localStorage.getItem('userList')),
        personType:JSON.parse(localStorage.getItem('personType')),
        typeNum:'',
        checkPersonModal:false,
        detailModal:false,
        approvalPerson:'',
        approvalPerson2:'',
        description:'',
        dataList:[],
        checkBoxTrueList:[],
        riskOrderId:'',
        detailData:[],
        columns:[
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            title: '序号',
            type: 'index',
            align: 'center',
            width: 70
          },
          {
            title: '管控措施',
            key: 'name',
            align: 'center',
          },
          {
            title: JSON.parse(localStorage.getItem('personType')) === 2?'工程公司管理人员':'集团公司管理人员',
            align: 'center',
            key: JSON.parse(localStorage.getItem('personType')) === 2?'controlDepartmentOfEngineeringCompanyName':'groupCompanyControlDepartmentName',
            width: 150,
          },
          {
            title: JSON.parse(localStorage.getItem('personType')) === 2?'工程公司分管领导':'集团公司分管领导',
            align: 'center',
            key: JSON.parse(localStorage.getItem('personType')) === 2?'leaderInChargeOfEngineeringCompanyName':'leaderInChargeOfGroupCompanyName',
            width: 150,
          },
          {
            title: '操作',
            width: 100,
            align: 'center',
            slot: 'action'
          }
        ],
        columns1: [
          {
            title: '项目管控部门',
            key: 'projectManagementDepartmentName',
            align: 'center'
          },
          {
            title: '项目部分管领导',
            key: 'projectManagementLeaderName',
            align: 'center'
          },
          {
            title: '项目部主管领导',
            key: 'leaderInChargeOfProjectDepartmentName',
            align: 'center'
          },
          {
            title: '工程公司管控部门',
            key: 'controlDepartmentOfEngineeringCompanyName',
            align: 'center'
          },
          {
            title: '工程公司分管领导',
            key: 'leaderInChargeOfEngineeringCompanyName',
            align: 'center'
          },
          {
            title: '集团公司管控部门',
            key: 'groupCompanyControlDepartmentName',
            align: 'center'
          },
          {
            title: '集团公司分管领导',
            key: 'leaderInChargeOfGroupCompanyName',
            align: 'center'
          },
        ],
        formData:{},
      }
    },
    methods:{
      textClick(){
        this.$emit('description',this.description);
          if(this.dataList){//不选人.默认列表的人时
            this.dataList.map(value => {
              this.$set(value,'setRiskOrderId',this.riskOrderId);
            })
          }
          this.$emit('getData',this.dataList);
      },
      //列表
      getMeasuresDetailList(id){
        this.$api.MonthlyDynamics.getMeasuresDetailList(id).then(res => {
          if(res.code === 200){
            this.dataList = res.data;
            this.dataList.length>0?this.description = res.data[0].riskControlRequirementTwo:'';
          }else {
            this.$Message.warning(res.message)
          }
        })
      },
      //措施方案详情
      /*getMeasuresDetail(id){
        this.$api.ledgerQuery.getMeasuresDetail(id).then(res => {
          if(res.code === 200){
            this.detailData = [res.data];
            this.formData.measures = res.data.measures;
            this.formData.frequencyName = res.data.frequencyName;
            this.formData.measureTypeName = res.data.measureType ===1?'管理':'技术';
          }else {
            this.$Message.warning(res.message)
          }
        })
      },*/
      getMsg(data){
        this.checkPersonModal = false;
        if(data && this.dataList.length>0){
          this.dataList.map(value => {
            this.checkBoxTrueList.map(item => {
              if(value.id === item.id){
                if(this.typeNum === 1){
                  //this.$set(value,'controllerOneName',data.name);
                  //this.$set(value,'controllerOne',data.personUserOrgId);
                  this.$set(value,'setRiskOrderId',this.riskOrderId);
                  if(this.personType === 2){
                    this.$set(value,'controlDepartmentOfEngineeringCompany',data.personUserOrgId);
                    this.$set(value,'controlDepartmentOfEngineeringCompanyName',data.name);
                  }else {
                    this.$set(value,'groupCompanyControlDepartment',data.personUserOrgId);
                    this.$set(value,'groupCompanyControlDepartmentName',data.name);
                  }
                }else if(this.typeNum === 2){
                  //this.$set(value,'controllerTwoName',data.name);
                  //this.$set(value,'controllerTwo',data.personUserOrgId);
                  this.$set(value,'setRiskOrderId',this.riskOrderId);
                  if(this.personType === 2){
                    this.$set(value,'leaderInChargeOfEngineeringCompany',data.personUserOrgId);
                    this.$set(value,'leaderInChargeOfEngineeringCompanyName',data.name);
                  }else {
                    this.$set(value,'leaderInChargeOfGroupCompany',data.personUserOrgId);
                    this.$set(value,'leaderInChargeOfGroupCompanyName',data.name);
                  }
                }
              }
            })
          })
        }
        this.$emit('getData',this.dataList);
        this.checkBoxTrueList = [];
      },
      selectChangeRiado(e){//复选框
        console.log(e);
        this.checkBoxTrueList = e;
      },
      issuePassBtn(num){
        if(this.checkBoxTrueList.length<=0){
          this.$Message.warning("请先选择需要设置的管控措施");
          return;
        }
        this.checkPersonModal=true;
        this.typeNum = num;
      },
      destroyBtn(row){
        //this.getMeasuresDetail(row.id);
        this.detailModal=true;
        this.detailData = [row];
        this.formData.measures = row.measures;
        this.formData.frequencyName = row.frequencyName;
        this.formData.measureTypeName = row.measureType ===1?'管理':'技术';
      },
    },
    mounted() {

    },
    created(){
      this.riskOrderId=this.id;
    },
    //这里用watch方法来监听父组件传过来的值，来实现实时更新
    watch:{
      id(val){ //message即为父组件的值，val参数为值
        this.riskOrderId = val; //将父组件的值赋给childrenMessage 子组件的值
        this.description = '';
        this.getMeasuresDetailList(this.riskOrderId);
      },
      userLists(item){//再次 方案制定  需要回显人名时 用
        console.log(item);
      }
    }
  };
</script>

<style lang="scss" scoped>
  .paln-table-title{
    border:1px solid #dcdee2;
    border-bottom:none;
    min-height:50px;
    line-height: 50px;
    font-size: 13px;
    padding: 0 10px;
    .col-title{
      height:50px;
      line-height: 50px;
      display: inline-block;
      float: left;
      padding-right: 10px;
    }
  }
  .width50 {
    width: 40%;
  }

</style>
